<template>
  <div id="visualData5">
    <!-- 下拉框：设备列表写死 1-16 -->
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        设备列表<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="deviceId in devicesData"
          :key="deviceId"
          :command="deviceId"
        >
          设备{{ deviceId }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 日期选择器 -->
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      @change="onDateChange"
      style="margin-left:20px;"
    />

    <!-- 图表 -->
    <div style="color: white;font-size: 24px; margin-top:20px;">
      <div id="chart" ref="chart" style="width: 100%; height: 260px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSoilData } from '@/api/screen/screen'

export default {
  name: 'visualData5',
  data() {
    return {
      chart: null,
      devicesData: Array.from({ length: 16 }, (_, i) => i + 1), // 固定 1-16
      selectedDevice: 1, // 默认选中设备号 = 1
      dateRange: ['2025-03-20', '2025-07-10'], // 默认日期范围
      option: {
        title: {
          text: '土壤养分含量',
          textStyle: { color: '#ffffff' }
        },
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['氮含量', '磷含量', '钾含量'],
          textStyle: { color: '#ffffff' }
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: { color: '#ffffff' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#ffffff' },
          name: 'mg/kg',
          nameTextStyle: { color: '#ffffff', fontSize: 14 }
        },
        series: [
          { name: '氮含量', data: [], type: 'line', smooth: true },
          { name: '磷含量', data: [], type: 'line', smooth: true },
          { name: '钾含量', data: [], type: 'line', smooth: true }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
    this.fetchData() // 页面加载时默认拉取一次数据
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.option)
    },
    // 选择设备
    handleCommand(deviceId) {
      this.selectedDevice = deviceId
      this.fetchData()
    },
    // 选择日期
    onDateChange() {
      this.fetchData()
    },
    // 拉取数据
    fetchData() {
      if (!this.dateRange || this.dateRange.length !== 2) return
      const [begin, end] = this.dateRange

      getSoilData({
        sensorId: this.selectedDevice, // ⚠️ 参数名要和后端一致
        begin,
        end
      }).then(res => {
        const data = res.data
        if (!data) return

        // 假设后端返回结构：{ dates:[], nitrogen:[], phosphorus:[], potassium:[] }
        this.option.xAxis.data = data.dates
        this.option.series[0].data = data.nitrogen
        this.option.series[1].data = data.phosphorus
        this.option.series[2].data = data.potassium
        this.chart.setOption(this.option)
      })
    }
  }
}
</script>

<style scoped lang="scss">
#visualData5 {
  padding: 1em;
}
</style>
